<template>
  <div class="signin">
    <div class="signin-1">
      <div class="logo">
        <img src="../../../assets/images/logo.png" />
        <div>萌宠之家</div>
      </div>
      <div class="box">
        <form>
          <!-- 手机号 -->
          <div class="account">
            <img src="../../../assets/images/uesr name.png" />
            <input type="number" 
            v-model="urseName"
            @blur="usernameTest"
             placeholder="请输入你的手机号" />
            <span v-show="usernameError">请输入正确的电话号码</span>
          </div>
          <!-- 密码 -->
          <div class="password">
            <img src="../../../assets/images/password.png" />
            <input type="number" 
            v-model="password"
            @blur="passwordTest"
            placeholder="请输入密码(4-10)位" />
            <span class="seee" v-show="passwordError">4-1
              0位包含数字和英文，长度</span>
          </div>
          <!-- 验证码 -->
          <div class="password">
            <img src="../../../assets/images/password.png" />
            <input type="number" v-model="userCode" placerholde="验证码" />
            <span
            @click="Verification" v-if="!time" :class="!time?'span1':'span2'">获取验证码</span>
            <span v-else :class="!time?'span1':'span2'">{{time}}后可获取</span>
          </div>
          <div class="button">
            <button type="button"
           @click="registerFuns"
             >注册</button>
          </div>
        </form>

        <div class="A">
          <span>————</span>
          <span @click="to_sign_in">社交账号登录</span>
          <span>————</span>
        </div>

        <div class="other">
          <div>
            <img src="../../../assets/images/qq.png" />
          </div>
          <div>
            <img src="../../../assets/images/wechat.png" />
          </div>
          <div>
            <img src="../../../assets/images/weibo.png" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script src="./Register.js">

</script>            
                

<style lang="scss" scoped>
@import "./Register.scss"
</style>